<template>
  <div class="home">
    <el-breadcrumb separator="|">
         <!-- <el-breadcrumb-item :to="{ path: '/teach/gradeClass',query:currentStuDetail}"><i class="el-icon-back"></i><span>返回</span> -->
         <el-breadcrumb-item :to="{ path: '/teach/gradeClass',query:{class:'一班'}}"><i class="el-icon-back"></i><span>返回</span>
         </el-breadcrumb-item>
        <!-- <el-breadcrumb-item>{{currentStuDetail.name}}总成绩:{{currentStuDetail.score}}</el-breadcrumb-item> -->
        <el-breadcrumb-item>{{currentStuName}}总成绩</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container>

      <el-container>
        <!-- 侧边栏的菜单 -->
        <!-- background-color="rgb(0,21,41)"  text-color="#fff" -->
        <el-menu
          :default-active="$route.path"
          unique-opened
          class="aside-menu"
          router
        >
          <!-- 单选题 -->
          <el-submenu index="1">
            <template slot="title"
              ><i class="iconfont icon-danxuantiankong"></i><span class="zt">单选题(每题五分)</span></template
            >
            <el-menu-item v-for="item in radioList" :key="item.id" :index="'/teach/grade/gradeDetail/MyRadio/' + item.id">
              <i class="iconfont icon-dati"></i><span class="zt">题目{{ item.id }}</span>
            </el-menu-item>
          </el-submenu>
          <!-- 多选题 -->
          <el-submenu index="2">
            <template slot="title"
              ><i class="iconfont icon-multiselect"></i><span class="zt">多选题(每题五分)</span></template
            >
            <el-menu-item v-for="item in multiList" :key="item.id" :index="'/teach/grade/gradeDetail/MyMultiSelect/' + item.id">
              <i class="iconfont icon-dati"></i><span class="zt">题目{{ item.id }}</span>
            </el-menu-item>
          </el-submenu>
          <!-- 判断题 -->
          <el-submenu index="3">
            <template slot="title"
              ><i class="iconfont icon-panduanti"></i><span class="zt">判断题(每题五分)</span></template
            >
            <el-menu-item v-for="item in judgeList" :key="item.id" :index="'/teach/grade/gradeDetail/MyJudge/' + item.id">
              <i class="iconfont icon-dati"></i><span class="zt">题目{{ item.id }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        </el-container>
        <!-- 主体 -->
        <!-- <el-container> -->
          <el-main class="main">
            <router-view></router-view>
          </el-main>
        <!-- </el-container> -->

    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ExamView',
  data () {
    return {
      msg: '学生姓名',
      // activeIndex: 'problem',
      activeIndex2: '/exam/MyRadio/1',
      // stu:{
      //   stuName: this.$route.query.name,
      //   stuScore: this.$route.query.score,
      // },
      currentStuName: ''

    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    ...mapMutations(['delCurrentStuDetail']),
    getCurrentStuName () {
      this.currentStuName = sessionStorage.getItem('currentStuName')
      console.log(this.currentStuName)
      // return this.currentStuName
    }
  },
  computed: {
    // ...mapState({ currentStuDetail: (state) => state.smy.currentStuDetail }),

    ...mapState(
      {
        radioList: (state) => state.smy.radioList,
        multiList: (state) => state.smy.multiList,
        judgeList: (state) => state.smy.judgeList

      }

    )

  },
  mounted () {
    this.getCurrentStuName()
  },
  beforeDestroy () {
    this.delCurrentStuDetail()
  }
}
</script>

<style>
body {
  margin: 0;
  /* text-decoration: none; */
}

a {
  text-decoration: none;
  /* color: #fff; */
}
</style>

<style lang="scss" scoped>
$bgColor: #0b2a33;
$textColor: #0c8fb3;
$bgColor: #0b2a33;
$textColor: #0c8fb3;
// .is-active {
//   color: #7f9193;
// }
.home{
  margin: -20px;
}
.el-breadcrumb {
  margin: 20px;
  width: 300px;

  // width: 300px;
  // height: 40px;
  span {
    font-size: 25px;
    font-weight: bold;
    color: #000;
  }
}
el-container{
  margin-top: 20px;
}
.header {
  width: 100%;
  height: 10vh;
  overflow: hidden;
  background-color: $bgColor;
  .headerSon {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    color: $textColor;
    font-size: 20px;
    font-weight: 600;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    .headerSonLeft {
      display: flex;
      align-items: center;
    }

    .el-menu--horizontal > .el-menu-item {
      color: #ececec;
      font-size: 15px;
    }
    .el-menu--horizontal > .el-menu-item:hover {
      background-color: #41aadbe0;
      color: #000;
      font-weight: bold;
    }
    .is-active {
      background-color: #4a9fdccb;
      color: #000;
    }
    .el-menu-demo {
      background-color: $bgColor;
      margin-left: -255px;
    }
    .el-icon-set-up {
      color: #fff;
    }
    .el-icon-connection {
      color: #fff;
    }
    .el-icon-notebook-2 {
      color: #fff;
    }
    .el-menu--horizontal > .el-menu-item:hover > .el-icon-set-up,
    .el-menu--horizontal > .el-menu-item:hover > .el-icon-connection,
    .el-menu--horizontal > .el-menu-item:hover > .el-icon-notebook-2 {
      color: #000;
    }
  }
}
.aside-menu {
  box-sizing: border-box;
  width: 235px;
  height: 92vh;
  // padding: 20px 0;
  .el-submenu {
    // .item1 {
    //   color: #551a8b;
    // }
    .zt {
      font-size: 18px;
      font-family: LiSu;
    }
    ul:nth-child(1){
      border-top:1px solid black;
    }

  }
}
.main {
  width: 80%;
  margin: 0 0 0 -100px;
  box-sizing: border-box;
  height: 85vh;
  box-shadow: 1px 1px 2px 2px #e8e8e8;
}
</style>
